<script setup lang="ts">
import { computed } from "vue";
import Grid from "@/components/framework/grid.vue";
import SiderMenu from "@/pages/main/layout/sider-menu.vue";
import ToggleView from "@/components/framework/toggle-view.vue";
import ToggleItem from "@/components/framework/toggle-item.vue";
import { useToolsStore } from "./tools-store.ts";
import { toolsMenuItems } from "./index.menus.ts";

const store = useToolsStore();
const activeKey = computed({
  get: () => store.activeKey,
  set: value => (store.activeKey = value),
});
</script>

<template>
  <grid col-template="240px 1fr" class="page-tools">
    <sider-menu :items="toolsMenuItems" v-model:active-key="activeKey" />

    <div class="overflow-auto">
      <toggle-view v-model:active-key="activeKey">
        <template v-for="group in toolsMenuItems" :key="group.key">
          <template v-for="it in group.children" :key="it.key">
            <toggle-item v-if="it.component" :item-id="it.key" :component="it.component" :cache-enabled="false" />
          </template>
        </template>
      </toggle-view>
    </div>
  </grid>
</template>
